<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
      el: "#demo",
      data: {
        firstName: 'A',
        lastName: 'B',
        //fullName1: 'A B'
        fullName2: 'A B'
      },
      computed: {
        //什么时候执行:1、初始化显示，2、相关的data属性数据发生了改变，自动调用
        fullName1(){//计算属性中一个方法,方法的返回值作为属性值
          console.log("fullName1()")
          return this.firstName + " " + this.lastName;
        },
        fullName3: {
          // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
          get(){
            console.log('fullName3 get()')
            return this.firstName +' '+ this.lastName;
          },
          // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
          //回调函数 计算并返回当前属性的值
          set(value){// fullName3的最新value值  A-B23
            console.log('fullName3 set()', value);
            // 更新firstName和lastName
            var names = value.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          }
        }
      },
      watch: {//监视语法
        firstName: function (value) {//firstName发生了改变
            console.log(this);//此时的this就是Vue的实例对象
            this.fullName2 = value + ' ' + this.lastName;
        }
      }
    })
    // 监视lastName
    vm.$watch('lastName',function (value) {
      console.log('$watch lastName', value);
      // 更新fullName2
      this.fullName2 = this.firstName + ' ' + value;
    });
</script>
</body>
</html>